<template>
	<view>
		<view>
			<!-- <u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750"></u-tabs-swiper> -->
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="tabsChange"></u-tabs>
		</view>
		<view v-for="(item, index) in filteredTabs" :key="index">
			<view class="u-p-30 one u-w-700 u-h-330 u-auto" v-if="current==2">
				<view class="cl_FFF">
					<text class="u-font-24"><i class='u-font-60 u-weight'>v</i>ip</text>
					<text class="u-font-20">{{tabs[current].name}}</text>
				</view>
				<view class=" u-m-t-30 u-font-20 cl_FFF">{{tabs[current].name}}优享特权</view>
			</view>
			<view class="u-p-30 u-w-700 one1 u-h-330 u-auto" v-else>
				<view class="cl_FFF">
					<text class="u-font-24"><i class='u-font-60 u-weight'>v</i>ip</text>
					<text class="u-font-20">{{tabs[current].name}}</text>
				</view>
				<view class=" u-m-t-30 u-font-20 cl_FFF">{{tabs[current].name}}优享特权</view>
			</view>
			<view class="u-w-450 u-h-40 his2 u-m-t-30 u-auto u-font-20 u-flex u-row-center" v-if="current==0">
				<text style="color: #FFF8EE;">开通</text>
				<u-image src='https://www.sqkjkj.vip/wxImg/vip/VIP1.png' width='50rpx' height='28rpx'></u-image>
				<text style="color: #FFF8EE;">即可尊享{{name}}的特权</text>
			</view>
			<view class="u-w-450 u-h-40 his1 u-m-t-30 u-auto u-font-20 u-flex u-row-center" v-if="current==1">
				<text style="color: #FFF8EE;">开通</text>
				<u-image src='https://www.sqkjkj.vip/wxImg/vip/VIP1.png' width='50rpx' height='28rpx'></u-image>
				<text style="color: #FFF8EE;">即可尊享{{name}}的特权</text>
			</view>
			<view class="u-w-450 u-h-40 his u-m-t-30 u-auto u-font-20 u-flex u-row-center" v-if="current==2">
				<text style="color: #FFF8EE;">开通</text>
				<u-image src='https://www.sqkjkj.vip/wxImg/vip/VIP.png' width='50rpx' height='28rpx'></u-image>
				<text style="color: #FFF8EE;">即可尊享{{name}}的特权</text>
			</view>
			<view class="u-p-30">
				<view class="u-p-20 u-b-r-20 u-w-650 u-l-h-40 u-auto u-font-20"
					style="background-color:#F3FBFF; color: #809ABA;">
					<view class="u-text-center u-flex u-row-center">
						<u-image src='https://www.sqkjkj.vip/wxImg/vip/VIP1.png' width='50rpx' height='28rpx'></u-image>
						<view class="">专享权益</view>

					</view>
					<view v-if="array && array[current]" class="u-m-t-20">
						<u-parse :html="array[current].content"></u-parse>
					</view>
				</view>
			</view>
		</view>


		<!-- 支付方式 -->
		<u-mask :show="show">
			<view class="warps">
				<view class="u-w-710 bg_FFFFFF u-p-20 u-b-r-20">
					<view class="u-text-right" @click="show=false">
						<u-icon name="close-circle-fill" size="50"></u-icon>
					</view>
					<view class="bg_FFFFFF">
						<view v-if="array && array[current]" class="">
							<text class="u-weight">支付金额：</text>
							<text class="cl_FF2D23FF">￥{{array[current].pay_money}}</text>
						</view>

						<view @click="pays='deposit'" class="u-flex u-row-between u-m-t-30 u-p-30"
							style="border-bottom: 1rpx solid #F6F6F6FF;">
							<view class="u-flex">
								<view class=" u-flex">
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/card.png" mode="aspectFill" width="50rpx"
										height='50rpx'>
									</u-image>
									<view class="u-m-l-30 u-font-28 ">钱包支付</view>
								</view>
								<view class="u-m-l-30">
									<view class=" cl_898989FF u-font-24">余额<text class="cl_FB473CFF">￥{{userinfo.user_wallet}}</text>
									</view>
								</view>
							</view>
							<view class="u-flex">
								<view class="">
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
										height='30rpx' v-if="pays=='deposit'"></u-image>
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
										height='30rpx' v-else>
									</u-image>
								</view>
							</view>
						</view>

						<view @click="openEpayDialog" class="u-flex u-row-between u-p-30"
							style="border-bottom: 1rpx solid #F6F6F6FF;">
							<view class="">
								<view class=" u-flex">
									<u-image src="http://xcx.itcwc.com/wxImg/5dcf4786109a5.png" mode="aspectFill" width="50rpx"
										height='50rpx'>
									</u-image>
									<view class="u-m-l-30 u-font-28 ">易支付</view>
								</view>
							</view>
							<view class="u-flex">
								<view class="">
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
										height='30rpx' v-if="pays=='epay'"></u-image>
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
										height='30rpx' v-else>
									</u-image>
								</view>
							</view>
						</view>

						<!-- #ifdef H5 || MP-WEIXIN || APP -->
						<view v-if="is_wechat_switch == 1" @click="pays='wechat'" class="u-flex u-row-between u-p-30"
							style="border-bottom: 1rpx solid #F6F6F6FF;">
							<view class="">
								<view class=" u-flex">
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="50rpx"
										height='50rpx'>
									</u-image>
									<view class="u-m-l-30 u-font-28 ">微信支付</view>
								</view>
							</view>
							<view class="u-flex">
								<view class="">
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
										height='30rpx' v-if="pays=='wechat'"></u-image>
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
										height='30rpx' v-else>
									</u-image>
								</view>
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS || MP-ALIPAY -->
						<view v-if="userinfo.alipay_switch==1" @click="pays='alipay'" class="u-flex u-row-between u-p-30"
							style="border-bottom: 1rpx solid #F6F6F6FF;">
							<view class="">
								<view class=" u-flex">
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="50rpx"
										height='50rpx'>
									</u-image>
									<view class="u-m-l-30 u-font-28">支付宝支付</view>
								</view>
							</view>
							<view class="u-flex">
								<view class="">
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
										height='30rpx' v-if="pays=='alipay'"></u-image>
									<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
										height='30rpx' v-else>
									</u-image>
								</view>
							</view>
						</view>
						<!-- #endif -->
					</view>
					<view class="u-m-t-30 u-b-r-20 u-w-600 bl2C_3F u-auto u-h-90 u-l-h-90 u-font-24 u-text-center cl_FFF "
						@click.stop="submitPay()">立即支付</view>
				</view>
			</view>
		</u-mask>

		<!-- 易支付选择弹窗 -->
		<u-popup v-model="showEpayDialog" mode="center" width="80%" border-radius="10">
			<view class="epay-dialog">
				<view class="epay-dialog-title">请选择支付方式</view>
				<view class="epay-dialog-content">
					<view class="epay-payment-option" @click="selectEpayMethod('wxpay')">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': params.epay_type === 'wxpay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">微信支付</view>
					</view>
					<view class="epay-payment-option" @click="selectEpayMethod('alipay')" v-if="!isWechatMP">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': params.epay_type === 'alipay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">支付宝支付</view>
					</view>
				</view>
				<view class="epay-dialog-footer">
					<view class="epay-dialog-btn cancel-btn" @click="showEpayDialog = false">取消</view>
					<view class="epay-dialog-btn confirm-btn" @click="confirmEpayMethod">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- 密码弹窗 -->
		<u-popup v-model="shows" mode='center'>
			<view class="u-p-30 u-h-200">
				<u-message-input v-if="shows" :focus="true" :maxlength='6' @finish="finish"></u-message-input>
			</view>
		</u-popup>
		<view class="" v-if="current==0">
			<view class=" u-fix bgc2 u-w-600 u-h-90 u-l-h-90 u-font-24 u-text-center u-m-l-60 u-b-60"
				v-if="userinfo.vip_id!=1" @click.stop="payvip">立即开通</view>
			<view class=" u-fix bgc2 u-w-600 u-h-90 u-l-h-90 u-font-24 u-text-center u-m-l-60 u-b-60"
				v-if="userinfo.vip_id==1" @click.stop="payvip">立即续费</view>
		</view>

		<!-- <view class=" u-fix u-w-600 u-h-90 u-l-h-90 u-font-24 u-text-center u-m-l-60 u-b-60"
			:class="current==0?'bgc':''">续费(30天)</view> -->
		<view class="" v-if="current==1">
			<view class=" u-fix u-w-600 bgc1 u-h-90 u-l-h-90 u-font-24 u-text-center u-m-l-60 u-b-60"
				v-if="userinfo.vip_id!=2" @click.stop="payvip">立即开通</view>
			<view class=" u-fix u-w-600 bgc1 u-h-90 u-l-h-90 u-font-24 u-text-center u-m-l-60 u-b-60"
				v-if="userinfo.vip_id==2" @click.stop="payvip">立即续费</view>
		</view>

		<!-- <view class=" u-fix u-w-600 u-h-90 u-l-h-90 u-font-24 u-text-center u-m-l-60 u-b-60"
			:class="current==1?'bgc1':''">续费(30天)</view> -->
		<view class="" v-if="current==2">
			<view class=" u-fix u-w-600 bgc u-h-90 u-l-h-90 u-font-24 u-text-center u-m-l-60 u-b-60" v-if="userinfo.vip_id!=3"
				@click.stop="payvip">立即开通</view>
			<view class=" u-fix u-w-600 bgc u-h-90 u-l-h-90 u-font-24 u-text-center u-m-l-60 u-b-60" v-if="userinfo.vip_id==3"
				@click.stop="payvip">立即续费</view>
		</view>

		<!-- <view class=" u-fix u-w-600 u-h-90 u-l-h-90 u-font-24 u-text-center u-m-l-60 u-b-60"
			:class="current==2?'bgc2':''">续费(30天)</view> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			pays: 'card',
			show: false,
			shows: false,
			array: [],
			pay_massage: '',
			name: '高级会员',
			client: '',
			list: [{
				name: '高级会员'
			}, {
				name: '中级会员'
			}, {
				name: '初级会员'
			}],
			tabs: [{
				id: 1,
				name: '普通会员',
				img: 'https://www.sqkjkj.vip/wxImg/vip/img.png'
			}, {
				id: 2,
				name: '中级会员',
				img: 'https://www.sqkjkj.vip/wxImg/vip/img.png'
			}, {
				id: 3,
				name: '高级会员',
				img: 'https://www.sqkjkj.vip/wxImg/vip/img.png'
			}],
			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			userinfo: '',
			params: {
				epay_type: 'wxpay',
				method: '',
			},
			showEpayDialog: false,
			isWechatMP: false,
			is_wechat_switch: '1',
		};
	},
	computed: {
		filteredTabs() {
			return this.tabs.filter((_item, index) => index <= 0);
		}
	},
	onLoad() {
		this.massage()
		this.userinfo = uni.getStorageSync("userinfo")

		// #ifdef MP-WEIXIN
		this.is_wechat_switch = this.userinfo.mini_wechat_switch
		// #endif
		// #ifdef H5
		this.is_wechat_switch = this.userinfo.h5_wechat_switch
		// #endif
		// #ifdef APP-PLUS
		this.is_wechat_switch = this.userinfo.app_wechat_switch
		// #endif
		this.detectDeviceType()
	},
	methods: {
		submitPay() {
			this.true_pay()
			// if(this.pays == 'deposit'){
			// 	this.shows = true
			// }else if(this.pays == 'epay'){
			// 	this.true_pay()
			// }else{
			// 	this.true_pay()
			// }
		},
		// 检测设备类型并设置相应的method参数
		detectDeviceType() {
			// #ifdef H5
			this.params.method = 'web' // H5环境使用web
			this.isWechatMP = false
			// #endif

			// #ifdef MP-WEIXIN
			this.params.method = 'jsapi' // 微信小程序环境使用jsapi
			this.isWechatMP = true
			// #endif

			// #ifdef MP-ALIPAY
			this.params.method = 'jsapi' // 支付宝小程序环境使用jsapi
			this.isWechatMP = false
			// #endif

			// #ifdef APP-PLUS
			this.params.method = 'web' // APP环境使用app
			this.isWechatMP = false
			// #endif

			console.log('当前设备类型:', this.params.method)
		},
		// tabs通知swiper切换
		tabsChange(index) {
			this.current = index;
		},
		// 获取vip数据列表
		massage() {
			this.$api.vip_list({}, res => {
				this.array = res.data.data.opt_list
				for (var i = 0; i < this.array.length; i++) {
					this.list[i].name = this.array[i].title
				}
			})
		},
		// 创建订单
		payvip() {
			let that = this
			this.$api.vip_list_order({
				vip_id: this.array[this.current].id
			}, res => {
				if (res.data.code == 1) {
					this.pay_massage = res.data.data.pay_info
					this.show = true
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				}
			})
		},
		// 支付
		finish(e) {
			// this.pay(e)
			// app
			// #ifdef APP-PLUS
			this.client = "APP"
			// #endif

			// 小程序
			// #ifdef MP
			this.client = "JSAPI"
			// #endif
			this.shows = false

			this.true_pay(e)
		},
		true_pay(e) {
			if (this.pays == 'deposit') {
				// if (uni.getStorageSync('userinfo').have_trade_pwd == 0) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请先设置余额支付密码',
				// 		success: (res) => {
				// 			if (res.confirm) {
				// 				this.$u.route('/pages/changePayPassword/changePayPassword')
				// 			} else {

				// 			}
				// 		}
				// 	})
				// 	return
				// }
				this.pay()
			} else if (this.pays == 'epay') {
				// 易支付
				let params = {
					target_id: this.pay_massage.target_id,
					target_type: this.pay_massage.target_type,
					pay_type: this.pays,
					type: this.params.epay_type,
					method: this.params.method,
					client: 'APP',
					random: 1,
					// 根据不同平台设置不同的client参数
					// #ifdef APP-PLUS
					client: 'APP',
					// #endif
					// #ifdef MP-WEIXIN || MP-ALIPAY
					client: 'JSAPI',
					// #endif
					// #ifdef H5
					client: 'WAP',
					// #endif
					trade_pwd: e
				}
				this.$com.easyPay(params, this.pays);
			} else {
				// #ifdef APP-PLUS
				this.$com.wxPay({
					target_id: this.pay_massage.target_id,
					target_type: this.pay_massage.target_type,
					pay_type: this.pays,
					client: 'APP',
					trade_pwd: ''
				}, this.pays).then(ok => {
					this.$refs.uToast.show({
						title: ok.data.msg,
						type: 'success',
						callback: cal => {
							this.$u.route({
								type: 'reLaunch',
								url: '/pages/my/my'
							})
						}
					})
				})
				// #endif
				// #ifdef MP-WEIXIN
				this.$com.weChatPay({
					target_id: this.pay_massage.target_id,
					target_type: this.pay_massage.target_type,
					pay_type: this.pays,
					client: 'JSAPI',
					trade_pwd: ''
				}, this.pays).then(ok => {
					this.$refs.uToast.show({
						title: ok.msg,
						type: 'success',
						callback: cal => {
							this.$u.route({
								type: 'reLaunch',
								url: '/pages/my/my'
							})
						}
					})
				})
				// #endif


				// #ifdef MP-ALIPAY
				this.$com.aliPay({
					target_id: this.pay_massage.target_id,
					target_type: this.pay_massage.target_type,
					pay_type: this.pays,
					client: 'JSAPI',
					trade_pwd: ''
				}, this.pays).then(ok => {
					this.$refs.uToast.show({
						title: ok.msg,
						type: 'success',
						callback: cal => {
							this.$u.route({
								type: 'reLaunch',
								url: '/pages/my/my'
							})
						}
					})
				})
				// #endif
			}
		},
		pay(e = '') {
			uni.showLoading({
				title: '支付中',
				mask: true
			});
			this.$api.go_pay({
				target_id: this.pay_massage.target_id,
				target_type: this.pay_massage.target_type,
				pay_type: this.pays,
				type: this.params.epay_type,
				method: this.params.method,
				client: 'APP',
				random: 1,
				// client:this.client,
				trade_pwd: e
			}, res => {
				uni.hideLoading();
				if (res.data.code == 1) {
					uni.showToast({
						icon: 'none',
						title: '支付成功'
					})
					// 根据平台不同处理支付跳转
					// #ifdef H5
					window.location.href = res.data.data.pay_info;
					// #endif

					// #ifdef APP-PLUS
					plus.runtime.openURL(res.data.data.pay_info);
					// #endif

					// #ifdef MP-WEIXIN || MP-ALIPAY
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + encodeURIComponent(res.data.data.pay_info)
					});
					// #endif
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				}
			})
		},
		openEpayDialog() {
			this.pays = 'epay' // 设置支付类型为epay
			this.showEpayDialog = true
		},

		selectEpayMethod(method) {
			this.params.epay_type = method
		},

		confirmEpayMethod() {
			this.showEpayDialog = false
		},
	}
}
</script>

<style scoped>
.one {
	background: url('https://www.sqkjkj.vip/wxImg/vip/img.png') no-repeat;
	background-size: 100% 100%;
}

.one1 {
	background: url('https://www.sqkjkj.vip/wxImg/vip/img1.png') no-repeat;
	background-size: 100% 100%;
}

.his {
	background: url('https://www.sqkjkj.vip/wxImg/vip/bg.png') no-repeat;
	background-size: 100% 100%;
}

.his1 {
	background: url('https://www.sqkjkj.vip/wxImg/vip/bg1.png') no-repeat;
	background-size: 100% 100%;
}

.his2 {
	background: url('https://www.sqkjkj.vip/wxImg/vip/bg2.png') no-repeat;
	background-size: 100% 100%;
}

.bgc {
	width: 653rpx;
	height: 98rpx;
	background: linear-gradient(90deg, #FDC358 0%, #FADDA3 100%);
	border-radius: 49rpx;
}

.bgc1 {
	width: 653rpx;
	height: 98rpx;
	background: linear-gradient(90deg, #3978EA 0%, #4FD2FF 100%);
	border-radius: 49rpx;
}

.bgc2 {
	width: 653rpx;
	height: 98rpx;
	background: linear-gradient(90deg, #4875AC 0%, #8EBBE2 100%);
	border-radius: 49rpx;
}

/* 易支付选择弹窗样式 */
.epay-dialog {
	background-color: #fff;
	padding: 30rpx;
}

.epay-dialog-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.epay-dialog-content {
	padding: 20rpx 0;
}

.epay-payment-option {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.radio-button {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 2rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.radio-inner {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: transparent;
}

.radio-selected {
	background-color: #3298FD;
}

.payment-icon {
	margin-right: 20rpx;
}

.payment-name {
	font-size: 28rpx;
}

.epay-dialog-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
}

.epay-dialog-btn {
	width: 45%;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

.cancel-btn {
	background-color: #f5f5f5;
	color: #666;
}

.confirm-btn {
	background-color: #3298FD;
	color: #fff;
}
</style>
